<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>库存管理系统</title>
    <style>
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            margin: 0;
            padding: 0;
            display: flex;
            background-color: #f4f4f9;
        }

        .sidebar {
            width: 220px;
            background-color: #2c3e50;
            color: white;
            padding-top: 20px;
            box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1);
        }

        .sidebar ul {
            list-style-type: none;
            padding: 0;
        }

        .sidebar li {
            padding: 15px 20px;
            cursor: pointer;
            transition: background-color 0.3s ease;
        }

        .sidebar li:hover {
            background-color: #34495e;
        }

        .content {
            padding: 20px;
            width: calc(100% - 220px);
            background-color: white;
            margin: 20px;
            border-radius: 10px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        }

        table {
            width: 100%;
            border-collapse: collapse;
            margin-top: 20px;
        }

        th,
        td {
            border: 1px solid #ddd;
            padding: 12px;
            text-align: left;
        }

        th {
            background-color: #f2f2f2;
        }

        input,
        select {
            padding: 10px;
            margin: 5px;
            border: 1px solid #ccc;
            border-radius: 5px;
        }

        button {
            padding: 10px 20px;
            background-color: #3498db;
            color: white;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            transition: background-color 0.3s ease;
        }

        button:hover {
            background-color: #2980b9;
        }

        .chart-container {
            width: 80%;
            margin: 0 auto;
        }
    </style>
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</head>

<body>
    <div class="sidebar">
        <ul>
            <li onclick="showModule('home')">首页</li>
            <li onclick="showModule('products')">商品管理</li>
            <li onclick="showModule('suppliers')">供应商管理</li>
            <li onclick="showModule('warehouses')">仓库管理</li>
            <li onclick="showModule('inventory')">库存记录管理</li>
        </ul>
    </div>
    <div class="content">
        <!-- 首页 -->
        <div id="home" class="module">
            <h2>库存统计首页</h2>
            <div class="chart-container">
                <canvas id="inventoryChart"></canvas>
            </div>
        </div>
        <!-- 商品管理模块 -->
        <div id="products" class="module" style="display: none;">
            <h2>商品管理</h2>
            <input type="text" id="product-name" placeholder="商品名称">
            <input type="text" id="product-description" placeholder="商品描述">
            <button onclick="addProduct()">添加</button>
            <table id="product-table">
                <thead>
                    <tr>
                        <th>ID</th>
                        <th>名称</th>
                        <th>描述</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody></tbody>
            </table>
        </div>
        <!-- 供应商管理模块 -->
        <div id="suppliers" class="module" style="display: none;">
            <h2>供应商管理</h2>
            <input type="text" id="supplier-name" placeholder="供应商名称">
            <input type="text" id="supplier-contact" placeholder="联系信息">
            <button onclick="addSupplier()">添加</button>
            <table id="supplier-table">
                <thead>
                    <tr>
                        <th>ID</th>
                        <th>名称</th>
                        <th>联系信息</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody></tbody>
            </table>
        </div>
        <!-- 仓库管理模块 -->
        <div id="warehouses" class="module" style="display: none;">
            <h2>仓库管理</h2>
            <input type="text" id="warehouse-name" placeholder="仓库名称">
            <input type="text" id="warehouse-location" placeholder="仓库位置">
            <button onclick="addWarehouse()">添加</button>
            <table id="warehouse-table">
                <thead>
                    <tr>
                        <th>ID</th>
                        <th>名称</th>
                        <th>位置</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody></tbody>
            </table>
        </div>
        <!-- 库存记录管理模块 -->
        <div id="inventory" class="module" style="display: none;">
            <h2>库存记录管理</h2>
            <select id="inventory-product"></select>
            <select id="inventory-supplier"></select>
            <select id="inventory-warehouse"></select>
            <input type="number" id="inventory-quantity" placeholder="数量">
            <button onclick="addInventoryRecord()">添加</button>
            <table id="inventory-table">
                <thead>
                    <tr>
                        <th>ID</th>
                        <th>商品</th>
                        <th>供应商</th>
                        <th>仓库</th>
                        <th>数量</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody></tbody>
            </table>
        </div>
    </div>
    <script>
        let products = [
            { id: 1, name: "iPhone 14", description: "苹果公司最新款智能手机" },
            { id: 2, name: "MacBook Pro", description: "高性能苹果笔记本电脑" },
            { id: 3, name: "iPad Air", description: "轻薄便携平板电脑" },
            { id: 4, name: "Apple Watch", description: "智能穿戴设备" },
            { id: 5, name: "AirPods Pro", description: "降噪无线耳机" },
            { id: 6, name: "Dell XPS 13", description: "高性能轻薄笔记本" },
            { id: 7, name: "Samsung Galaxy S23", description: "三星旗舰智能手机" },
            { id: 8, name: "Huawei MatePad Pro", description: "华为高端平板电脑" },
            { id: 9, name: "Sony WH - 1000XM5", description: "降噪头戴式耳机" },
            { id: 10, name: "Microsoft Surface Pro 9", description: "多功能二合一电脑" }
        ];
        let suppliers = [
            { id: 1, name: "苹果供应商 A", contact: "contactA@apple.com" },
            { id: 2, name: "苹果供应商 B", contact: "contactB@apple.com" },
            { id: 3, name: "戴尔供应商", contact: "contact@dell.com" },
            { id: 4, name: "三星供应商", contact: "contact@samsung.com" },
            { id: 5, name: "华为供应商", contact: "contact@huawei.com" },
            { id: 6, name: "索尼供应商", contact: "contact@sony.com" },
            { id: 7, name: "微软供应商", contact: "contact@microsoft.com" },
            { id: 8, name: "配件供应商 X", contact: "contactX@accessories.com" },
            { id: 9, name: "配件供应商 Y", contact: "contactY@accessories.com" },
            { id: 10, name: "综合供应商 Z", contact: "contactZ@general.com" }
        ];
        let warehouses = [
            { id: 1, name: "北京仓库", location: "北京市朝阳区" },
            { id: 2, name: "上海仓库", location: "上海市浦东新区" },
            { id: 3, name: "广州仓库", location: "广州市天河区" },
            { id: 4, name: "深圳仓库", location: "深圳市南山区" },
            { id: 5, name: "成都仓库", location: "成都市高新区" },
            { id: 6, name: "武汉仓库", location: "武汉市武昌区" },
            { id: 7, name: "西安仓库", location: "西安市雁塔区" },
            { id: 8, name: "杭州仓库", location: "杭州市滨江区" },
            { id: 9, name: "南京仓库", location: "南京市鼓楼区" },
            { id: 10, name: "重庆仓库", location: "重庆市渝北区" }
        ];
        let inventoryRecords = [
            { id: 1, productId: 1, supplierId: 1, warehouseId: 1, quantity: 100 },
            { id: 2, productId: 2, supplierId: 1, warehouseId: 2, quantity: 50 },
            { id: 3, productId: 3, supplierId: 1, warehouseId: 3, quantity: 80 },
            { id: 4, productId: 4, supplierId: 1, warehouseId: 4, quantity: 120 },
            { id: 5, productId: 5, supplierId: 1, warehouseId: 5, quantity: 60 },
            { id: 6, productId: 6, supplierId: 3, warehouseId: 6, quantity: 70 },
            { id: 7, productId: 7, supplierId: 4, warehouseId: 7, quantity: 90 },
            { id: 8, productId: 8, supplierId: 5, warehouseId: 8, quantity: 40 },
            { id: 9, productId: 9, supplierId: 6, warehouseId: 9, quantity: 30 },
            { id: 10, productId: 10, supplierId: 7, warehouseId: 10, quantity: 55 }
        ];

        function showModule(moduleId) {
            const modules = document.querySelectorAll('.module');
            modules.forEach(module => {
                module.style.display = 'none';
            });
            const selectedModule = document.getElementById(moduleId);
            selectedModule.style.display = 'block';
            if (moduleId === 'inventory') {
                populateInventorySelects();
            }
            if (moduleId === 'products') {
                renderTable('product-table', products);
            } else if (moduleId === 'suppliers') {
                renderTable('supplier-table', suppliers);
            } else if (moduleId === 'warehouses') {
                renderTable('warehouse-table', warehouses);
            } else if (moduleId === 'inventory') {
                renderTable('inventory-table', inventoryRecords.map(record => {
                    const product = products.find(p => p.id === record.productId);
                    const supplier = suppliers.find(s => s.id === record.supplierId);
                    const warehouse = warehouses.find(w => w.id === record.warehouseId);
                    return {
                        id: record.id,
                        product: product ? product.name : '未知商品',
                        supplier: supplier ? supplier.name : '未知供应商',
                        warehouse: warehouse ? warehouse.name : '未知仓库',
                        quantity: record.quantity
                    };
                }));
            } else if (moduleId === 'home') {
                renderInventoryChart();
            }
        }

        function addProduct() {
            const name = document.getElementById('product-name').value;
            const description = document.getElementById('product-description').value;
            const id = products.length + 1;
            const product = { id, name, description };
            products.push(product);
            renderTable('product-table', products);
            document.getElementById('product-name').value = '';
            document.getElementById('product-description').value = '';
        }

        function addSupplier() {
            const name = document.getElementById('supplier-name').value;
            const contact = document.getElementById('supplier-contact').value;
            const id = suppliers.length + 1;
            const supplier = { id, name, contact };
            suppliers.push(supplier);
            renderTable('supplier-table', suppliers);
            document.getElementById('supplier-name').value = '';
            document.getElementById('supplier-contact').value = '';
        }

        function addWarehouse() {
            const name = document.getElementById('warehouse-name').value;
            const location = document.getElementById('warehouse-location').value;
            const id = warehouses.length + 1;
            const warehouse = { id, name, location };
            warehouses.push(warehouse);
            renderTable('warehouse-table', warehouses);
            document.getElementById('warehouse-name').value = '';
            document.getElementById('warehouse-location').value = '';
        }

        function addInventoryRecord() {
            const productId = parseInt(document.getElementById('inventory-product').value);
            const supplierId = parseInt(document.getElementById('inventory-supplier').value);
            const warehouseId = parseInt(document.getElementById('inventory-warehouse').value);
            const quantity = parseInt(document.getElementById('inventory-quantity').value);
            const id = inventoryRecords.length + 1;
            const inventoryRecord = { id, productId, supplierId, warehouseId, quantity };
            inventoryRecords.push(inventoryRecord);
            renderTable('inventory-table', inventoryRecords.map(record => {
                const product = products.find(p => p.id === record.productId);
                const supplier = suppliers.find(s => s.id === record.supplierId);
                const warehouse = warehouses.find(w => w.id === record.warehouseId);
                return {
                    id: record.id,
                    product: product ? product.name : '未知商品',
                    supplier: supplier ? supplier.name : '未知供应商',
                    warehouse: warehouse ? warehouse.name : '未知仓库',
                    quantity: record.quantity
                };
            }));
            document.getElementById('inventory-quantity').value = '';
        }

        function renderTable(tableId, data) {
            const table = document.getElementById(tableId);
            const tbody = table.getElementsByTagName('tbody')[0];
            tbody.innerHTML = '';
            data.forEach(item => {
                const row = tbody.insertRow();
                for (const key in item) {
                    if (key === 'id') {
                        const cell = row.insertCell();
                        cell.textContent = item[key];
                    } else if (key === 'name' || key === 'contact' || key === 'location' || key === 'product' || key === 'supplier' || key === 'warehouse' || key === 'quantity') {
                        const cell = row.insertCell();
                        cell.textContent = item[key];
                    }
                }
                const actionCell = row.insertCell();
                const deleteButton = document.createElement('button');
                deleteButton.textContent = '删除';
                deleteButton.onclick = () => {
                    if (tableId === 'product-table') {
                        products = products.filter(p => p.id!== item.id);
                    } else if (tableId === 'supplier-table') {
                        suppliers = suppliers.filter(s => s.id!== item.id);
                    } else if (tableId === 'warehouse-table') {
                        warehouses = warehouses.filter(w => w.id!== item.id);
                    } else if (tableId === 'inventory-table') {
                        inventoryRecords = inventoryRecords.filter(r => r.id!== item.id);
                    }
                    renderTable(tableId, data.filter(d => d.id!== item.id));
                };
                actionCell.appendChild(deleteButton);
            });
        }

        function populateInventorySelects() {
            const productSelect = document.getElementById('inventory-product');
            const supplierSelect = document.getElementById('inventory-supplier');
            const warehouseSelect = document.getElementById('inventory-warehouse');
            productSelect.innerHTML = '';
            supplierSelect.innerHTML = '';
            warehouseSelect.innerHTML = '';
            products.forEach(product => {
                const option = document.createElement('option');
                option.value = product.id;
                option.textContent = product.name;
                productSelect.appendChild(option);
            });
            suppliers.forEach(supplier => {
                const option = document.createElement('option');
                option.value = supplier.id;
                option.textContent = supplier.name;
                supplierSelect.appendChild(option);
            });
            warehouses.forEach(warehouse => {
                const option = document.createElement('option');
                option.value = warehouse.id;
                option.textContent = warehouse.name;
                warehouseSelect.appendChild(option);
            });
        }

        function renderInventoryChart() {
            const ctx = document.getElementById('inventoryChart').getContext('2d');
            const productNames = products.map(product => product.name);
            const quantities = productNames.map(name => {
                const totalQuantity = inventoryRecords.reduce((sum, record) => {
                    const product = products.find(p => p.id === record.productId);
                    if (product && product.name === name) {
                        return sum + record.quantity;
                    }
                    return sum;
                }, 0);
                return totalQuantity;
            });

            new Chart(ctx, {
                type: 'bar',
                data: {
                    labels: productNames,
                    datasets: [{
                        label: '库存数量',
                        data: quantities,
                        backgroundColor: 'rgba(75, 192, 192, 0.2)',
                        borderColor: 'rgba(75, 192, 192, 1)',
                        borderWidth: 1
                    }]
                },
                options: {
                    scales: {
                        y: {
                            beginAtZero: true
                        }
                    }
                }
            });
        }

        // 初始加载时显示首页
        showModule('home');
    </script>
</body>

</html>    